<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		orderMsg
	} from '@/stores'

	const msgStore = orderMsg()

	//存出发地址
	const selectStartAddress = ref(null)
	//存目的地地址
	const selectEndAddress = ref(null)
	//存hotAddress.name
	const hotAddress = ref(null)
	//存是否需要刷新
	const needRefresh = ref(false)
	//选出发地
	const startAddress = async () => {
		await uni.navigateTo({
			url: '/pages/map/LocationPicker',
			success() {
				uni.$off('Address')
				uni.$once('Address', (location) => {
					msgStore.updateStartAddress(location)
					msgStore.updateHotAddress(location.hotAddress)
				})
			},
			fail(err) {
				console.log('打开失败:', err)
				uni.showToast({
					title: '打开地图失败',
					icon: 'none'
				})
			}
		})
	}
	//选目的地
	const endAddress = async () => {
		await uni.navigateTo({
			url: '/pages/map/LocationPicker',
			success() {
				uni.$off('Address')
				uni.$once('Address', (location) => {
					msgStore.updateEndAddress(location)
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/car/car'
						});
					}, 100);
				})
			},
			fail(err) {
				console.log('打开失败:', err)
				uni.showToast({
					title: '打开地图失败',
					icon: 'none'
				})
			}
		})
	}
	//点击获取热门地点的地址
	const hotAddressClick = (item) => {
		msgStore.updateEndAddress(item)
		uni.navigateTo({
			url: '/pages/car/car'
		})
	}
</script>

<template>
	<uni-nav-bar :fixed="true" background-color="#ffffff" title="漳州城际出行" color="black" status-bar :border="false" />
	<view class="home">
		<view class="kb">
			<image src="/static/images/logo.png"></image>
		</view>
		<view class="box">
			<view class="smallbox_1">
				<view class="point"></view>
				<text @click="startAddress">{{msgStore.selectStartAddress?.address||'选择您的出发地 >'}}</text>
				<!-- <text @click="startAddress" v-else>选择您的出发地 ></text> -->
			</view>
			<view class="smallbox_2">
				<view class="point"></view>
				<text @click="endAddress">{{msgStore.selectEndAddress?.address||'选择您的目的地'}}</text>
			</view>
			<view class="smallbox_3" v-if="msgStore.selectStartAddress?.address">
				<view class="hot">
					<uni-icons type="vip" class="icon"></uni-icons>
					<text>热门目的地</text>
				</view>
				<view class="hotAdress">
					<view class="address" v-for="item in msgStore.hotAddress" :key="item.id"
						@click="hotAddressClick(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import '../../styles/_rpx.scss';

	uni-nav-bar {
		font-weight: bold;
	}

	.home {
		background-color: #f8f8f8;
	}

	.kb {
		background-color: #f8f8f8;
		height: rpx(147);
		margin-bottom: rpx(12);

		image {
			width: 100%;
			height: rpx(147);
		}
	}

	.box {
		width: rpx(354);
		height: auto;
		border-radius: rpx(10);
		background-color: #fff;
		margin: 0 auto;
		padding: rpx(10);
		font-size: rpx(14);


		.point {
			width: rpx(10);
			height: rpx(10);
			margin: auto rpx(10) auto rpx(9);
			border-radius: rpx(10);
		}

		.smallbox_1 {
			display: flex;
			margin: 0 auto;
			width: rpx(324);
			height: rpx(41);
			line-height: rpx(41);

			.point {
				background-color: #35ac91;
			}
		}

		.smallbox_2 {
			display: flex;
			font-weight: bold;
			color: #1b1b1b;
			width: rpx(324);
			height: rpx(41);
			background-color: #f4f6f8;
			border-radius: rpx(10);
			margin: 0 auto;
			line-height: rpx(41);

			.point {
				background-color: #fb5d00;
			}
		}
	}

	.hot {
		margin: rpx(25) 0 rpx(15) rpx(15);

		.icon {
			margin-right: rpx(5);
		}

		text {
			font-weight: bold;
		}
	}

	.hotAdress {
		display: flex;
		flex-wrap: wrap;
		margin-left: rpx(15);

		.address {
			width: rpx(100);
			height: rpx(29);
			background-color: #f8f8f8;
			line-height: rpx(29);
			text-align: center;
			margin: 0 rpx(12) rpx(12) 0;
		}
	}
</style>